import React from "react";
import "./less/header.less";
import logoImg from "../assets/logo.png";
import { Menu, Dropdown, message } from "antd";
import { useNavigate } from "react-router-dom";
import { CaretDownOutlined } from "@ant-design/icons";
// import {useState} from 'react'

export default function MyHeader() {
  let avatar = JSON.parse(localStorage.getItem("userinfo")).avatar;
  let avatarImg =
    "http://47.93.114.103:6688/" +
    JSON.parse(localStorage.getItem("userinfo")).avatar;
  let username =
    JSON.parse(localStorage.getItem("userinfo")).username || "游客";
  const defaultAvatar =
    "https://img2.baidu.com/it/u=976187030,237040006&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
  const navigate = useNavigate();
  const logOut = () => {
    localStorage.setItem("usserinfo", "");
    setTimeout(() => {
      navigate("/login");
    }, 500);
    message.success("退出成功");
  };

  const menu = (
    <Menu>
      <Menu.Item key={1}>修改资料</Menu.Item>
      <Menu.Divider />
      <Menu.Item key={2} onClick={logOut}>
        退出登录
      </Menu.Item>
    </Menu>
  );
  return (
    <div className="myheader">
      <img src={logoImg} className="logo-img" />
      <div className="user-box">
        <img
          src={avatar ? avatarImg : defaultAvatar}
          alt="头像"
          className="avatar"
        />
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
            {username} <CaretDownOutlined />
          </a>
        </Dropdown>
      </div>
    </div>
  );
}
